<template>
  <van-list
    v-model="ListLoading"
    :finished="ListFinished"
    finished-text="底线！底线！"
    @load="onLoadList"
  >
    <div v-for="(item,index) in list" :key="index" class="item-wrap">
      <!-- 作者和时间 -->
      <div class="user-wrap flex">
        <div class="avatar">
          <img :src="item.profile_image" alt/>
        </div>
        <div class="info-wrap">
          <p class="user-name">
            <span class="name-span">{{item.name}}</span>
            <!-- 分类标签 -->
            <span v-show="item.theme_name">
              <van-tag color="#07c160" text-color="#ffffff">{{item.theme_name}}</van-tag>
            </span>
          </p>
          <p class="joke-time">{{item.created_at}}</p>
        </div>
      </div>
      <!-- 内容 -->
      <div class="joke-content">
        <!-- 文字内容 -->
        <p class="content-text" v-show="item.text">{{item.text}}</p>
        <!-- 媒体文件 -->
        <p :class="[{'click-show':item.height>=jokeMaxHeight}]">
          <!-- 视频 -->
          <video :src="item.videouri" :poster="item.cdn_img" controls v-if="item.type === '41'"></video>
          <!-- 声音 -->
          <audio :src="item.voiceuri" controls v-if="item.type === '31'"></audio>
          <!-- 图片 -->
          <img :src="item.cdn_img" alt v-if="item.type === '10'"/>
          <!-- 过长的内容，隐藏超出部分。详情中查看完整 -->
          <span v-if="item.height>=jokeMaxHeight" class="maxheight-cover">
            <van-icon name="weapp-nav"/>
          </span>
        </p>
      </div>
      <!--收藏 点赞 丑拒 评论 分享 -->
      <div class="joke-action flex">
        <p class="action-itme favourite">
          <van-icon name="like-o" size="16px" class="action-icon"/>
          {{item.favourite}}
        </p>
        <p class="action-itme comment">
          <van-icon name="chat-o" size="16px" class="action-icon"/>
          {{item.comment}}
        </p>
        <p class="action-itme hate">
          <van-icon name="close" size="16px" class="action-icon"/>
          {{item.hate}}
        </p>
        <p class="action-itme ding">
          <van-icon name="smile-o" size="16px" class="action-icon"/>
          {{item.ding}}
        </p>
      </div>
    </div>
  </van-list>
</template>
<script lang="ts">
  import {Component, Vue, Prop, Emit} from "vue-property-decorator";
  import {List} from "vant";
  import {Tag} from "vant";
  import {Icon} from "vant";

  @Component({
    components: {
      [List.name]: List,
      [Tag.name]: Tag,
      [Icon.name]: Icon
    }
  })
  export default class JokeItem extends Vue {
    @Prop({required: true, default: []})
    private list!: object[]; // 列表数组

    private jokeMaxHeight: number = 1300; // 单个列表的最大长度
    private ListLoading: boolean = false; // 列表数据是否加载中
    private ListFinished: boolean = false; // 列表数据是否全部加载完

    // 加载列表数据
    @Emit("loadMoreList")
    onLoadList() {
    }
  }
</script>
<style lang="scss">
  .item-wrap {
    padding: 20px 0;
    margin: 0 16px;
    border-bottom: 1px solid #eee;
    &:first-child{
      padding-top: 0;
    }
    .user-wrap {
      align-items: center;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #f4f4f4;
        margin-right: 10px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .info-wrap {
        font-size: 13px;
        .user-name {
          margin-bottom: 4px;
          .name-span {
            margin-right: 10px;
          }
        }
        .joke-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .joke-content {
      color: #333;
      font-size: 14px;
      margin: 10px 0;
      .content-text {
        margin: 10px 0;
      }
      img, video {
        width: 100%;
      }
      .click-show {
        max-height: 800px;
        overflow-y: hidden;
        position: relative;
        .maxheight-cover {
          width: 100%;
          height: 40px;
          line-height: 40px;
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          background: rgba(255, 255, 255, .8);
          box-shadow: 0 -20px 30px rgba(255, 255, 255, .9)
        }
      }
    }
    .joke-action {
      font-size: 13px;
      .action-itme {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        .action-icon {
          margin-right: 3px;
        }
      }
    }
  }
</style>


